<template>
	<view class="AudioPlayer">
		<view @click="toMusicPlay(data.playUrl,data.songmid)">
			<view :style="player.isPlay?'':'animation-play-state: paused;'">
				<image :src="data.imageUrl" @error="data.imageUrl='/static/errors.jpg'" mode="aspectFit"></image>
			</view>
		</view>
		<view @click="toMusicPlay(data.playUrl,data.songmid)">
			{{data.name}}
		</view>
		<view>
			<view @click="player.AudioPlay(innerAudioContext)">
				<span :style="player.isPlay?'':'padding-left: 5%;'" class="iconfont"
					:class="player.isPlay?'icon-zanting':'icon-bofang'"></span>
			</view>
		</view>
		<view @click="hint">
			<uni-icons style="color: #e6e7eb;" type="list" size="30"></uni-icons>
		</view>
	</view>
	<SongMenu ref="songMenup"></SongMenu>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';

	import {
		toMusicPlay
	} from "@/utils/Redirect.js"
	const songMenup = ref()
	const hint = () => {
		songMenup.value.popup.open()
	}
	const player = getApp().globalData.player
	const innerAudioContext = getApp().globalData.innerAudioContext
	const data = getApp().globalData.data
	if (innerAudioContext.src != data.value.playUrl) {
		innerAudioContext.src = data.value.playUrl
	}
</script>

<style scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.AudioPlayer {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: -5px;
		height: 100rpx;
		line-height: 100rpx;
		display: grid;
		grid-template-columns: 15% 60% 15% 10%;
		grid-template-rows: 100%;
		padding: 5px 10px;
		box-sizing: border-box;
		box-shadow: 0 -4px 5px -4px #7d7daa;
		background-color: rgba(33, 33, 43, 0.9);
		color: #e6e7eb;
		backdrop-filter: blur(5px);
	}

	.AudioPlayer>view {
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;

	}



	.AudioPlayer>view:nth-child(1)>view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80%;
		aspect-ratio: 1/1;
		background-color: #dfdfdf;
		box-shadow: 0 0px 5px 0px #e6e7eb;
		border-radius: 50px;
		overflow: hidden;
		animation: rotate 0.5s linear infinite forwards;
	}

	@keyframes rotate {
		to {
			transform: rotate(360deg);
		}

	}


	.AudioPlayer>view:nth-child(2) {
		font-size: 0.9em;
		justify-content: left;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.AudioPlayer>view:nth-child(3)>view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60%;
		aspect-ratio: 1/1;
		border-radius: 50px;
		border: 2px solid #e6e7eb;
	}
</style>